<template>
  <div id="app">
    <input type="text" placeholder="请输入密文" @keyup.enter="getAnswer($event.target.value)">
    <!-- 测试文本 85j685g585;585== -->
    <span>{{ result }}</span>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      result: ''
    }
  },
  methods: {
    getAnswer (target) {
      let result = ''
      let temp = ''
      for (let i = 0; i < target.length; i++) {
        // 将密文每一位还原位16进制数
        temp += String.fromCharCode(target.charCodeAt(i) - 5)
        // 当密文片段满4位则将4位16进制数转换为10进制数并查询出对应文字封入result中
        if (i % 4 === 3) {
          result += String.fromCharCode(parseInt(temp, 16).toString())
          // 置空temp
          temp = ''
          continue
        }
      }
      this.result = result
    }
  }
}
</script>

<style scoped lang="less">
#app {
  display: flex;
  flex-direction: column;
  width: 200px;
  margin: auto;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
input{
  outline: none;
}
span{
  background: #39c5bb;
}
</style>
